<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@custom-media</title>
    <style>
      @custom-media --OSdark (prefers-color-scheme: dark);
      @custom-media --OSlight (prefers-color-scheme: light);

      @custom-media --pointer (hover) and (pointer: coarse);
      @custom-media --mouse (hover) and (pointer: fine);

      @custom-media --xxs-and-above (width >= 240px);
      @custom-media --xxs-and-below (width <= 240px);

      html,
      body {
        width: 100%;
        height: 100%;
      }

      @media (--OSdark) {
        body {
          background: red !important;
        }
      }
      @media (--OSlight) {
        body {
          background: lawngreen !important;
        }
      }
    </style>
  </head>
  <body></body>
</html>
